"use client";

import React, { useState, useEffect } from "react";
import { Menu, message, Spin } from "antd";
import { debounce } from "../../../libs/util";
import req from "../../../libs/request";
import { PRACTICE_MENU } from "./constant";
import FrontEnd from "./components/FrontEnd";
import PaperEnd from "./components/PaperEnd";
import "./index.css";

const PracticeQuestions: React.FC = () => {
    // 状态管理
    const [currentKey, setCurrentKey] = useState<string>("paper");
    const [loading, setLoading] = useState<boolean>(false);
    const [menuList, setMenuList] = useState<any[]>([]);

    // 获取练习菜单
    const getPracticeMenu = async () => {
        try {
            setLoading(true);
            // 模拟API调用
            const mockMenuList = [
                { key: "paper", label: "模拟考试" },
                { key: "frontend", label: "前端练习" },
            ];
            setMenuList(mockMenuList);

            // 实际API调用
            // const res = await req.get('/api/practice/menu');
            // if (res.code === 200) {
            //   setMenuList(res.data);
            // }
        } catch (error) {
            console.error("获取练习菜单失败:", error);
            message.error("获取练习菜单失败");
        } finally {
            setLoading(false);
        }
    };

    // 处理菜单点击
    const handleMenuClick = (key: string) => {
        setCurrentKey(key);
    };

    // 处理开始练习
    const handleStartPractice = (selectedItems: string[]) => {
        if (selectedItems.length === 0) {
            message.warning("请至少选择一个练习项目");
            return;
        }
        // TODO: 跳转到练习详情页
        message.success(`已选择 ${selectedItems.length} 个练习项目`);
    };

    // 处理选择试卷
    const handleSelectPaper = (paperId: string) => {
        // TODO: 跳转到练习详情页
        message.success(`已选择试卷 ID: ${paperId}`);
    };

    // 初始化
    useEffect(() => {
        getPracticeMenu();
    }, []);

    return (
        <div className="practice-questions-container">
            <div className="practice-questions-menu">
                <Menu
                    mode="inline"
                    selectedKeys={[currentKey]}
                    items={menuList}
                    onClick={({ key }) => handleMenuClick(key)}
                />
            </div>
            <div className="practice-questions-content">
                <Spin spinning={loading}>
                    {currentKey === "paper" ? (
                        <PaperEnd onStartPractice={handleSelectPaper} />
                    ) : (
                        <FrontEnd onStartPractice={handleStartPractice} />
                    )}
                </Spin>
            </div>
        </div>
    );
};

export default PracticeQuestions;
